import classNames from 'classnames'
import React, { Component } from 'react'

export default class List extends Component {
  render() {
    const { list } = this.props
    return (
      <div className='comment-list'>
        {list.map((item) => (
          <div key={item.id} className='list-item'>
            <div className='user-face'>
              <img
                className='user-head'
                src='https://y.qq.com/music/photo_new/T001R300x300M000003aQYLo2x8izP.jpg?max_age=2592000'
                alt=''
              />
            </div>
            <div className='comment'>
              <div className='user'>{item.author}</div>
              <p className='text'>{item.comment}</p>
              <div className='info'>
                <span className='time'>{item.time}</span>
                <span
                  className={classNames([
                    'like',
                    {
                      liked: item.attitude === 1,
                    },
                  ])}
                >
                  <i className='icon'></i>
                </span>
                <span
                  className={classNames('hate', {
                    hated: item.attitude === -1,
                  })}
                >
                  <i className='icon'></i>
                </span>
                <span className='reply btn-hover'>删除</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    )
  }
}
